CSS Compound Rules

With CSS compound rules, you can make tags, such as h2, look completely different depending on what box it's inside of.

More Details: About Compound Rules

We can stylize these different tags to appear different depending on which box they sit in. This is done by making compound CSS rules. For example, instead of making a generic rule for all h1 text we can make different rules for h1 in different boxes. These could include header, main, aside, footer, etc. The compound rule would look like this…

header h1 { font-family: your choice here; font-size: your choice here; font-weight: your choice here; color: your choice here; }

main h1 { font-family: a different choice here; font-size: a different choice here; font-weight: a different choice here; color: a different choice here; }

aside h1 { font-family: a third choice here; font-size: a third choice here; font-weight: a third choice here; color: a third choice here; }

footer h1 { font-family: a forth choice here; font-size: a forth choice here; font-weight: a forth choice here; color: a forth choice here; }

HTML Symbols

You can also place HTML symbols into your text. They can be both useful and decorative.

Span as a Tag

Span is a tag with which you can do many things. It can function as a box if you make certain rules for it.

More Details: The Use of the Span Tag

Lastly, to change the appearance of text we could use the span tag. the CSS code would be used in the attached style sheet would look like this…

p span { font-family: a forth choice here; font-size: a forth choice here; font-weight: a forth choice here; color: a forth choice here; }

tags h1 - h6 p b is visually similar to strong i visually similar to em pre mark code

Common

font-size:

font-weight:

font-family:

color: (Note: only applies to typeface color, not background!)

text-align:

text-decoration:

text-transformation:

line-height:

Uncommon

overflow:

text-indentation:

letter-spacing:

word-spacing:

text-shadow:

vertical-align:

Rare

direction:

unicode-bidi:

white-space:

baseline-shift:

baseline;

baseline-shift:

sub;

baseline-shift:

super;

baseline-shift: 10%; /* Percentage */

baseline-shift: 20px; /* Length */

Links

Links work in states:

1. A link that is there, but has never been clicked

2. A link that has been clicked

3. A link that is currently been clicked

a: is code for links; a stands for anchored link

Additionally, you can change the appearance of the link depending on its state.

a { color: #HEX; }

a:visited { color: #HEX; font-weight: bold; }

a:hover{ color: #HEX; text-decoration: underline; cursor: pointer; }

a:active { color: #color; }